<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>选择车系</title>
  <style>
    :root {
      --radius: 12px;
      --shadow: 0 8px 24px rgba(0,0,0,.08);
      --transition: .35s cubic-bezier(.4,0,.2,1);
    }

    *{margin:0;padding:0;box-sizing:border-box}

    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
      background:#f5f7fa;
      color:#333;
      display:flex;
      flex-direction:column;
      align-items:center;
      min-height:100vh;
      padding:40px 20px;
    }

    h2{
      font-size:2.2rem;
      margin-bottom:40px;
      background:linear-gradient(135deg,#667eea 0%, #764ba2 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      letter-spacing:.5px;
    }

    .series-list{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
      gap:30px;
      max-width:1200px;
      width:100%;
    }

    .series-card{
      background:#fff;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform var(--transition), box-shadow var(--transition);
      cursor:pointer;
    }

    .series-card:hover{
      transform:translateY(-6px);
      box-shadow:0 12px 32px rgba(0,0,0,.12);
    }

    .series-card img{
      width:100%;
      height:auto;
      display:block;
    }

    .series-card p{
      padding:18px 12px;
      font-size:1.25rem;
      font-weight:600;
      text-align:center;
      color:#222;
    }

    @media (prefers-color-scheme: dark){
      body{background:#1e1e2d;color:#f5f5f5}
      .series-card{background:#2a2a3c}
      .series-card p{color:#f5f5f5}
    }

    /* 淡入上浮动画 */
    .series-card{
      opacity:0;
      transform:translateY(20px);
      animation:fadeUp .6s forwards;
    }
    @keyframes fadeUp{
      to{opacity:1;transform:none}
    }
  </style>
</head>

<body>
<h2>请选择车系</h2>
<div class="series-list">
  <!-- 为每个卡片添加统一的 class 与动画延迟 -->
  <div th:each="s,iterStat : ${seriesList}"
       class="series-card"
       th:style="'animation-delay:' + ${iterStat.index*0.1} + 's'">
    <a th:href="@{/car-config/{id}(id=${s.id})}">
      <img th:src="${s.series_img}" th:alt="${s.series_name}"/>
      <p th:text="${s.series_name}"></p>
    </a>
  </div>
</div>
</body>
</html>